<template>
  <div class="login">
    <h1 style="font-style: italic;text-shadow: -4px 5px 3px rgba(0,0,0,0.3);">驴友，你好</h1>
    <form @submit.prevent="handleSubmit">
      <div>
        <input type="text" id="username" v-model="username" required placeholder="用户名：">
      </div>
      <div>
        <input type="email" id="email" v-model="email" required placeholder="邮箱：">
      </div>
      <div>
        <input type="password" id="password" v-model="password" required placeholder="密码：">
      </div>
     <div>        <input type="password" id="check" v-model="check" required placeholder="确认密码：">
      </div>
      <button type="submit">注册</button>
    </form>
  <router-link :to="'/'">已有账号？去登录</router-link>
  </div>
  
</template>

<script>
const IP = 'http://47.113.197.249:8083';
import { ref, getCurrentInstance } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router'

export default {
  name: 'Register',
  setup() {
    const router = useRouter();
  
  
    const username = ref('');
    const email = ref('');
    const password = ref('');
    const check = ref('');
    const UID = ref('');


    const handleSubmit = () => {
      const userData = {
        username: username.value,
        email: email.value,
        password: password.value,
      };
      console.log('User data', userData);
      if (username.value.length < 4 || username.value.length > 50)
        alert("用户名不合法！请输入4~50个字符!");
      else if (password.value.length < 6)
        alert("密码过短！至少六位字符！");
      else if (password.value !== check.value)
        alert("密码验证失败！请重试！");
      else
      axios.post(IP + '/user/register', userData)
        .then(response => {    
        alert(response.data.msg);
          router.push('/home?UID=' + response.data.data.id);
      })
        .catch(error => {
        console.error('发送过程中出错:', error);
      });
    };
    return {
      username,
      email,
      password,
      check,
      handleSubmit,
      UID,
    };
  },
      

};

</script>
<style scoped>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
      animation: gradientBackground 5s ease infinite;
    }

    @keyframes gradientBackground {
      0% { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }
      50% { background: linear-gradient(135deg, #c3cfe2, #f5f7fa); }
      100% { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }
    }

    .login {
      margin: 0 auto;
      padding: 20px;
      border-radius: 45vh;
      box-shadow: -80px 100px 20px rgba(0,0,0,0.1);
      background-color: rgb(255, 252, 244);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90vh;
      width: 100vw;
      flex-direction: column;
      animation: fadeIn 1s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    form div {
      margin-bottom: 10px;
      animation: slideIn 0.5s ease-out forwards;
      opacity: 0;
    }

    form div:nth-child(1) { animation-delay: 0.2s; }
    form div:nth-child(2) { animation-delay: 0.4s; }
    form div:nth-child(3) { animation-delay: 0.6s; }

    @keyframes slideIn {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input {
      width: 1000px;
      padding: 8px;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    input:focus {
      border-color: #42b983;
      box-shadow: 0 0 10px rgba(66, 185, 131, 0.5);
      outline: none;
    }

    button {
      padding: 10px 200px;
      background-color: #42b983;
      color: white;
      border: none;
      border-radius: 32px;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }

    button:hover {
      background-color: #185037;
      box-shadow: -8px 10px 2px rgba(0,0,0,0.1);
      transform: scale(1.05);
    }
  </style>